<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
        }

        .bg {
            border-radius: 5px;
            width: 1000px;
            min-height: 600px;
            background-color: #fff;
            margin: 40px auto;
            box-shadow: -80px 10px 80px 1px gray;
            padding: 40px 40px;
        }

        table.tftable {
            font-size: 12px;
            width: 100%;
            border-width: 1px;
            border-collapse: collapse;
        }

        table.tftable th {
            font-size: 12px;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            text-align: left;
        }

        table.tftable td {
            font-size: 12px;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
        }

        .nav {
            position: fixed;
            width: 100px;
            top: 20px;
            right: 60px;
            padding: 10px;
        }

        .nav li {
            list-style: none;
        }

        .nav a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li><a href="#">
                <h3>#视频文件</h3>
            </a></li>
        <li><a href="#examinee">
                <h3>#考生信息</h3>
            </a></li>
        <li><a href="#subject">
                <h3>#考试科目</h3>
            </a></li>
    </ul>
    <div class="bg" id="file">
        <h1>视频文件</h1>
        <h3>查看和删除</h3>
        <table id="files" class="tftable" border="1">
            <tr>
                <th>id</th>
                <th>上传位置</th>
                <th>上传日期</th>
                <th>考生id</th>
                <th>考试科目</th>
                <th>#</th>
            </tr>
        </table>
        <h3>编辑和新增</h3>
        <table class="tftable" border="1">
            <tr>
                <th>id（只读且仅用于编辑）</th>
                <th>上传位置</th>
                <th>上传日期</th>
                <th>考生id</th>
                <th>考试科目</th>
                <th>#</th>
            </tr>
            <tr>
                <td><input type="text" data='filedata.id' id="id" placeholder="id" readonly></td>
                <td><input type="text" data='filedata.filelocation' id="filelocation" placeholder="上传位置"></td>
                <td><input type="text" data='filedata.addtime' id="addtime" placeholder="上传日期"></td>
                <td><input type="text" data='filedata.examinee_id' id="examinee_id" placeholder="考生id"></td>
                <td><input type="text" data='filedata.subject_id' id="subject_id" placeholder="考试科目"></td>
                <td>
                    <input type="button" value="新增" class="add">
                    <input type="button" value="编辑" class="edit">
                </td>
            </tr>
        </table><br />
    </div>
    <div class="bg" id="examinee">
        <h1>考生信息</h1>
        <h3>查看和删除</h3>
        <table id="examinees" class="tftable" border="1">
            <tr>
                <th>id</th>
                <th>准考证号</th>
                <th>身份证号</th>
                <th>考生姓名</th>
                <th>登录密码</th>
                <th>#</th>
            </tr>
        </table>
        <h3>编辑和新增</h3>
        <table class="tftable" border="1">
            <tr>
                <th>id（只读且仅用于编辑）</th>
                <th>准考证号</th>
                <th>身份证号</th>
                <th>考生姓名</th>
                <th>登录密码</th>
                <th>#</th>
            </tr>
            <tr>
                <td><input type="text" data='examineedata.id' id="id" placeholder="id" readonly></td>
                <td><input type="text" data='examineedata.testnumber' id="testnumber" placeholder="准考证号"></td>
                <td><input type="text" data='examineedata.idnumber' id="idnumber" placeholder="身份证号"></td>
                <td><input type="text" data='examineedata.name' id="name" placeholder="考生姓名"></td>
                <td><input type="text" data='examineedata.password' id="password" placeholder="登录密码"></td>
                <td>
                    <input type="button" value="新增" class="add">
                    <input type="button" value="编辑" class="edit">
                </td>
            </tr>
        </table><br />
    </div>
    <div class="bg" id="subject">
        <h1>考试科目</h1>
        <h3>查看和删除</h3>
        <table id="subjects" class="tftable" border="1">
            <tr>
                <th>id</th>
                <th>考试科目名称</th>
                <th>考试开始日期</th>
                <th>考试结束日期</th>
                <th>#</th>
            </tr>
        </table>
        <h3>编辑和新增</h3>
        <table class="tftable" border="1">
            <tr>
                <th>id（只读且仅用于编辑）</th>
                <th>考试科目名称</th>
                <th>考试开始日期</th>
                <th>考试结束日期</th>
                <th>#</th>
            </tr>
            <tr>
                <td><input type="text" data='subjectdata.id' id="id" placeholder="id" readonly></td>
                <td><input type="text" data='subjectdata.name' id="name" placeholder="考试科目名称"></td>
                <td><input type="text" data='subjectdata.startime' id="startime" placeholder="考试开始日期"></td>
                <td><input type="text" data='subjectdata.endtime' id="endtime" placeholder="考试结束日期"></td>
                <td>
                    <input type="button" value="新增" class="add">
                    <input type="button" value="编辑" class="edit">
                </td>
            </tr>
        </table><br />
    </div>
    <script src="file/jQuery-v3.5.1.js"></script>
    <script src="file/config.js"></script>
    <script>
        $(function () {
            //赋值
            var filedata = {
                id: '1',
                filelocation: '123',
                addtime: '',
                examinee_id: '',
                subject_id: ''
            }
            var subjectdata = {
                id: '',
                name: '',
                startime: '',
                endtime: ''
            }
            var examineedata = {
                id: '',
                testnumber: '',
                idnumber: '',
                name: '',
                password: ''
            }

            $('[data]').on('change', function () {
                var val = eval($(this).attr('data') + '="' + $(this).val() + '"');
                console.log(filedata)
                console.log(subjectdata)
                console.log(examineedata)
            })

            $('.set').on('click', function () {
                var tablename = $(this).parent().parent().parent().parent().parent().attr('id');
                eval(tablename + 'data=' + $(this).parent().parent().eq(0).val());
            })
            //加载时获取
            $.ajax({
                type: 'get',
                url: window.config.port + 'php/admin.php?c=getfile',
                headers: {
                    'token': sessionStorage['id']
                },
                async: false,
                success: function (rs) {
                    if (rs.code == 200) {
                        $('#files').append(function () {
                            var html = '';
                            rs.data.forEach(row => {
                                html += '<tr><th>' + row.id + '</th><th>' + row.filelocation + '</th><th>' + row.addtime + '</th><th>' + row.examinee_id + '</th><th>' + row.subject_id + '</th>' +
                                    '<td><input type="button" value="获取到表单" class="set"><input type="button" value="删除" class="del"></td></tr>'
                            });
                            return html;
                        });
                    }
                }
            });

            $.ajax({
                type: 'get',
                url: window.config.port + 'php/admin.php?c=getexaminee',
                headers: {
                    'token': sessionStorage['id']
                },
                async: false,
                success: function (rs) {
                    if (rs.code == 200) {
                        $('#examinees').append(function () {
                            var html = '';
                            rs.data.forEach(row => {
                                html += '<tr><th>' + row.id + '</th><th>' + row.testnumber + '</th><th>' + row.idnumber + '</th><th>' + row.name + '</th><th>' + row.password + '</th>' +
                                    '<td><input type="button" value="获取到表单" class="set"><input type="button" value="删除" class="del"></td></tr>'
                            });
                            return html;
                        });
                    }
                }
            });

            $.ajax({
                type: 'get',
                url: window.config.port + 'php/admin.php?c=getsubject',
                headers: {
                    'token': sessionStorage['id']
                },
                async: false,
                success: function (rs) {
                    if (rs.code == 200) {
                        $('#subjects').append(function () {
                            var html = '';
                            rs.data.forEach(row => {
                                html += '<tr><th>' + row.id + '</th><th>' + row.name + '</th><th>' + row.startime + '</th><th>' + row.endtime + '</th>' +
                                    '<td><input type="button" value="获取到表单" class="set"><input type="button" value="删除" class="del"></td></tr>'
                            });
                            return html;
                        });
                    }
                }
            });
            //单击事件：增、删、改
            $('.del').on('click', function () {
                var tablename = $(this).parent().parent().parent().parent().parent().attr('id');
                var id = $(this).parent().parent().children().eq(0).html();
                var url = window.config.port + 'php/admin.php?c=del' + tablename + '&id=' + id;
                console.log(url)
                $.get({
                    url,
                    type: 'get',
                    headers: {
                        'token': sessionStorage['id']
                    },
                    success: function (rs) {
                        if (rs.code == 200) {
                            alert(rs.data)
                            window.location.reload()
                        } else {
                            alert(rs.message)
                        }
                    }
                })
            })

            $('.add').on('click', function () {
                var tablename = $(this).parent().parent().parent().parent().parent().attr('id');
                var url = window.config.port + 'php/admin.php?c=add' + tablename;
                var data = eval(tablename + 'data');
                $.ajax({
                    url,
                    type: 'post',
                    data,
                    headers: {
                        'token': sessionStorage['id']
                    },
                    success: function (rs) {
                        if (rs.code == 200) {
                            alert('添加成功')
                            window.location.reload()
                        } else {
                            alert(rs.message)
                        }
                    }
                })
            })

            $('.edit').on('click', function () {
                var tablename = $(this).parent().parent().parent().parent().parent().attr('id');
                var url = window.config.port + 'php/admin.php?c=edit' + tablename;
                var data = eval(tablename + 'data');
                $.ajax({
                    url,
                    type: 'post',
                    data,
                    headers: {
                        'token': sessionStorage['id']
                    },
                    success: function (rs) {
                        if (rs.code == 200) {
                            alert('编辑成功')
                            window.location.reload()
                        } else {
                            alert(rs.message)
                        }
                    }
                })
            })
        })
    </script>
</body>

</html>